﻿@model StatCan.OrchardCore.Queries.GraphQL.ViewModels.GraphQLQueryViewModel

<style asp-name="codemirror"></style>
<script asp-name="codemirror" depends-on="admin" at="Foot"></script>
<script asp-name="codemirror-mode-javascript" at="Foot"></script>
<script asp-name="codemirror-addon-selection-active-line" at="Foot"></script>

<div class="form-group">
    <label asp-for="Query">@T["Query"]</label>
    <textarea asp-for="Query" rows="12" class="form-control"></textarea>
    <span class="hint">@T["The GraphQL query with parameter support(liquid). You can use <a href=\"{0}\" target=\"_blank\">GraphiQL</a> ui to easily build the query.", Html.Raw(Url.Action("Index", "Admin", new { area = "OrchardCore.Apis.GraphQL" }))]</span>
</div>

<script at="Foot">
    $(function () {
      // Hide the Query Schema as it's not useful or required for the GraphQL queries
      $("#Query_Schema").closest('.form-group').hide();

      CodeMirror.fromTextArea(document.getElementById('@Html.IdFor(x => x.Query)'), 
        { mode: "javascript",
          lineNumbers: true, 
          lineWrapping: true,
          styleActiveLine: true, 
          viewportMargin: Infinity,}
      );
    });
</script>



